<template>
	<view class="body">
		<!-- 头部导航 -->
		<u-navbar title="购买记录" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>
		<view v-if="loading" class="add-load">
			<u-loading mode="flower"></u-loading>
		</view>
		<view v-else-if="orders.length != 0">
			<record :orders="orders"></record>
		</view>
		<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>
		<loadMore :currentLength="orders.length" :total="total" :pageSize="pageSize" @load-list="getMyshopPage" ref="loadArray" @load-add="pageNum++"></loadMore>
	</view>
</template>

<script>
import user from '@/api/user';
import record from '@/components/record/record.vue';
import loadMore from '@/components/load-more/load-more.vue';

export default {
	components: {
		record,
		loadMore
	},
	data() {
		return {
			orders: [],
			loading: true,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			loadingType: 'more'
		};
	},
	onLoad() {
		this.pageNum = 1;
		this.getMyshoplist();
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},

	methods: {
		getMyshoplist() {
			user.getMyshoplist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				this.orders = res.rows;
				this.total = res.total;
				this.loading = false;
			});
		},
		async getMyshopPage() {
			const res = await user.getMyshoplist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			});

			this.orders = [...this.orders, ...res.rows];
			this.total = res.total;
			return this.orders.length;
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	width: 100%;
	min-height: 100vh;
	background: #f5f5f5;
}
</style>
